<!DOCTYPE html>
<html lang="zh - CN">

<head>
  <meta charset="UTF - 8">
  <meta name="viewport" content="width=device-width, initial - scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>网页引用播放器</title>
</head>

<body>
  <h2>项目实战</h2>
  <h3>设计网页引用播放器：</h3>
  <div class="player">
    <div class="control - bar">
      <button id="pauseBtn" class="control - btn pause">暂停</button>
      <button id="playBtn" class="control - btn play">播放</button>
      <div class="time - display">
        <span id="currentTime">00:00</span> / <span id="totalTime">00:00</span>
      </div>
      <input type="range" id="progressBar" min="0" max="100">
    </div>
    <div class="playlist - controls">
      <button id="resetList">重置列表</button>
      <button id="shuffleList">随机打乱</button>
      <button id="clearList">清空列表</button>
    </div>
    <ul id="playlist">
      <li data - src="感恩的心 - 欧阳菲菲.mp3">感恩的心 - 欧阳菲菲</li>
      <li data - src="北京北京 - 梁博.mp3">北京北京 - 梁博</li>
      <li data - src="离不开你 - 朱克.mp3" class="active">离不开你 - 朱克</li>
      <li data - src="最后一页 - 江语晨.mp3">最后一页 - 江语晨</li>
    </ul>
    <div class="play - mode">播放模式：全部</div>
  </div>
  <audio id="audioPlayer" src="离不开你 - 朱克.mp3"></audio>
  <script src="script.js"></script>
</body>

</html>